<template>
  <div :class="$style.webjdk">
    <div ref="custom" :class="$style['mount']"></div>
  </div>
</template>

<script setup lang="ts">
import WebOfficeSDK from '@/assets/js/web-office-sdk-v1.1.19.es.js';
import { onMounted, ref } from 'vue';

onMounted(() => {
  initJDK();
});
const custom = ref<HTMLElement | null>(null);
const initJDK = () => {
  const jssdk = WebOfficeSDK.config({
    // 开发的时候可以先前往 kdocs.cn 获取预览地址
    // 例如：https://www.kdocs.cn/p/xxxx?from=docs
    // url: 'https://kdocs.cn/l/ciZLceNogSj5',
    url: 'https://kdocs.cn/l/cuds4mhK8kOF',
    mount: custom.value,
    mode: 'simple',
    commonOptions: {
      // isShowTopArea: false, // 隐藏顶部区域（头部和工具栏）
      // isShowHeader: false, // 隐藏头部区域
      // isBrowserViewFullscreen: false, // 是否在浏览器区域全屏
      isIframeViewFullscreen: true, // 是否在 iframe 区域内全屏
      // acceptVisualViewportResizeEvent: true, // 控制 WebOffice 是否接受外部的 VisualViewport
    },
  });
  // custom.value.$el.html(jssdk.iframe);
  jssdk.on('fileOpen', function(data: { success: any }) {
    console.log(data.success);
  });
  // // 如果需要对 iframe 进行特殊的处理，可以通过以下方式拿到 iframe 的 dom 对象
  // console.log(jssdk.iframe);
  // $('.w_custom_mount').html(jssdk.iframe);
  // $('.web-office-default-container').remove();
  //
  // // 打开文档结果
  // jssdk.on('fileOpen', function(data) {
  //   console.log(data.success);
  // });
  //
  // // 首次设置 token 和 后续刷新，token都是通过调用此API（如果没有设置token的话，会报token失败的问题）
  // jssdk.setToken({
  //   token: currentToken,
  // });
};
</script>

<style lang="less" module>
.webjdk {
  .mount {
    width: 100%;
    height: 650px;
  }
}
</style>
